<template>
	<view>
		<u-mask :show="showDrawer && mask" @click="maskClick"></u-mask>
		<view v-if="showDrawer" class='box' :style="style">
			<view class='box_item' v-for="(item,index) in list_dyc" :key="index" @touchstart='touchstart'
				@touchend="touchend" :animation="index === 0 ? animationData : ''">
				<view class="txt-box">
					<view class="tit">{{item.txt}}</view>
					<u-icon @click="close" v-if="closeable" class="u-close" :class="['u-close--' + closeIconPos]"
						:name="closeIcon" :color="closeIconColor" :size="closeIconSize"></u-icon>
				</view>
				<!-- <view class="btm-box">
					<view class="btm-box2">
						<view class="btn-bk-l">{{index + 1}}</view>
					</view>
				</view> -->
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: Boolean,
				default: false
			},
			list: {
				type: Array,
				default () {
					return []
				}
			},
			// 是否显示关闭图标
			closeable: {
				type: Boolean,
				default: true
			},
			closeIconPos: {
				type: String,
				default: 'top-right'
			},
			// 关闭图标的名称，只能uView的内置图标
			closeIcon: {
				type: String,
				default: 'close'
			},
			// 关闭图标的颜色
			closeIconColor: {
				type: String,
				default: '#909399'
			},
			// 关闭图标的大小，单位rpx
			closeIconSize: {
				type: [String, Number],
				default: '30'
			},
			/**
			 * 是否显示遮罩
			 */
			mask: {
				type: Boolean,
				default: true
			},
		},
		watch: {
			value(val) {
				if (val) {
					this.open();
				} else if(!this.closeFromInner) {
					this.close();
				}
				this.closeFromInner = false;
			},
			list(e) {
				let that = this;
				that.list_dyc = e;
			},
		},
		mounted() {
			// 组件渲染完成时，检查value是否为true，如果是，弹出popup
			this.value && this.open();
		},
		data() {
			return {
				showDrawer: false,
				closeFromInner: false, // value的值改变，是发生在内部还是外部
				nowPgae: 1,
				startX: 0,
				slider: false,
				animationData: {},
				list_dyc: [],
			};
		},
		created: function() {
			this.list_dyc = this.list;
		},
		methods: {
			// 遮罩被点击
			maskClick() {
				this.close();
			},
			change( param2, status) {
				// 如果this.popup为false，意味着为picker，actionsheet等组件调用了popup组件
				
				if (status) {
					// #ifdef H5 || MP
					this.timer = setTimeout(() => {
						this[param2] = status;
						this.$emit(status ? 'open' : 'close');
					}, 50);
					// #endif
					// #ifndef H5 || MP
					this.$nextTick(() => {
						this[param2] = status;
						this.$emit(status ? 'open' : 'close');
					})
					// #endif
				} else {
					this.timer = setTimeout(() => {
						this[param2] = status;
						this.$emit(status ? 'open' : 'close');
					}, this.duration);
				}
			},
			open() {
				this.change('showDrawer', true);
			},
			close() {
				// 标记关闭是内部发生的，否则修改了value值，导致watch中对value检测，导致再执行一遍close
				// 造成@close事件触发两次
				this.closeFromInner = true;
				this.change('showDrawer', false);
			},
			onImageError(item, index) {
				//虽触发，但不会显示默认的图片				
				this.error = null; //这个暂没有发现作用
				let obj = {
					index: index,
					list: this.list
				};
				this.$emit('Error', obj);
			},
			touchstart(e) {
				this.startX = e.changedTouches[0].clientX
			},
			touchend(e) {
				let that = this;
				let startX = this.startX;
				let endX = e.changedTouches[0].clientX;
				if (this.slider) return;
				// 下一页(左滑距离大于30)
				if (startX - endX > 30) {
					this.slider = true
					//尾页(当前页 等于 总页数)
					if (this.nowPgae == this.list_dyc.length) {
						this.slider = false
						uni.showToast({
							title: '已经是最后一张了',
							icon: 'none'
						});
						return;
					};
					//创建动画   5s将位置移动到-150%,-150%
					let animation = uni.createAnimation({
						duration: 500,
					});
					animation.translateX('-150%').translateY('-150%').rotate(60).step();
					this.animationData = animation.export()
					// 移动完成后
					setTimeout(function() {
						var list_dyc = that.list_dyc;
						var slidethis = that.list_dyc.shift(); //删除数组第一项
						that.list_dyc.push(slidethis); //将第一项放到末尾
						//创建动画   将位置归位
						let animation = uni.createAnimation({
							duration: 0,
						});
						animation.translateX('-53%').translateY('-50%').rotate(0).step();
						that.list_dyc = that.list_dyc;
						that.animationData = animation.export();
						that.slider = false;
						that.nowPgae = that.nowPgae + 1;

					}, 500)
				}
				// 上一页
				/* if (endX - startX > 30) {
					this.slider = true
					//首页
					if (this.nowPgae == 1) {
						this.slider = false
						uni.showToast({
							title: '已经到第一张了',
							icon: 'none'
						})
						return;
					};
					//创建动画  移动到-150%,-150%
					let animation = uni.createAnimation({
						duration: 0,
					});
					animation.translateX('-150%').translateY('-150%').rotate(100).step();
					var list_dyc = that.list_dyc;
					var slidethis = that.list_dyc.pop(); //删除数组末尾项
					that.list_dyc.unshift(slidethis); //将删除的末尾项放到第一项
					that.animationData = animation.export()
					that.list_dyc = that.list_dyc
					setTimeout(function() {
						//创建动画   5s将位置移动到原位
						let animation2 = uni.createAnimation({
							duration: 500,
							// timingFunction: 'cubic-bezier(.8,.1,.2,0.8)',
						});
						animation2.translateX('-53%').translateY('-50%').rotate(0).step();
						that.animationData = animation2.export()
						that.slider = false
						that.nowPgae = that.nowPgae - 1

					}, 50)
				} */
			},

		}
	}
</script>

<style lang="scss">
	.txt-box {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 100%;

		.tit {
			font-size: 40upx;
			font-weight: bold;
			padding-bottom: 20upx;
		}
	}

	.btm-box {
		position: fixed;
		left: 0;
		bottom: 10upx;
		width: 100%;

		.btm-box2 {
			padding: 30upx 40upx;
			text-align: center;
		}

		.btm-bk-l {
			width: 100%;
			margin: 20upx auto;
			padding: 20upx;
			font-size: 40upx;
		}
	}

	.box {
		position: relative;
		z-index: 10071;
	}

	.box_item {
		position: fixed;
		width: 500rpx;
		height: 500rpx;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		padding: 20rpx;
		background: #fff;
		border: 1rpx solid #eee;
		border-radius: 20rpx;
		box-shadow: 1px 1px 0px 0px rgba(0, 0, 5, 1);
	}

	.box_item:nth-child(1) {
		z-index: 4;
		transform: translateX(-53%) translateY(-50%);
	}

	.box_item:nth-child(2) {
		z-index: 3;
		transform: translateX(-50%) translateY(-50%);
	}

	// .box_item:nth-child(3) {
	// 	z-index: 2;
	// 	transform: translateX(-47%) translateY(-52%);
	// }

	// .card_item:nth-child(4) {
	// 	z-index: 1;
	// 	transform: translateX(-44%) translateY(-53%);
	// }

	.u-close {
		position: absolute;
		z-index: 3;
	}

	.u-close--top-left {
		top: 30rpx;
		left: 30rpx;
	}

	.u-close--top-right {
		top: 30rpx;
		right: 30rpx;
	}

	.u-close--bottom-left {
		bottom: 30rpx;
		left: 30rpx;
	}

	.u-close--bottom-right {
		right: 30rpx;
		bottom: 30rpx;
	}
</style>